<template>
    <!-- 内容部分 -->
    <div class="card">
        <!-- 推荐列表 -->
        <div class="card_list">
            <div class="card_content content-width">
                 <!-- 列表表头 -->
                <div class="filter_order">
                    <div class="order_container">
                        <span class="order_item" :class="{ active: isItem === 1  }" @click="changePage1">综合榜</span>
                        <span class="order_item" :class="{ active: isItem === 2  }" @click="changePage2">热练榜</span>
                        <span class="order_item" :class="{ active: isItem === 3  }" @click="changePage3">新锐榜</span>
                        <span class="order_item" :class="{ active: isItem === 4  }" @click="changePage4">最新</span>
                    </div>
                    <div class="order_btn">
                        筛选
                        <el-icon style="align:center"><ArrowDown /></el-icon>
                    </div>
                </div>
                <div class="loadMoreList">
                    <div class="content_card_item">
                        <!-- 选项卡 -->
                        <div class="card_item" v-for="list in recommendList" :key="list.id">
                            <div class="cover_waper">
                                <div class="cover">
                                    <a href="javascript:;">
                                        <img class="cover_img" :src="list.cover[0]" alt="" />
                                        <img src="../../../../assets/images/bf.png" class="play_icon">
                                    </a>
                                </div>
                                <!-- 第一行文字 -->
                                <div class="moment_detail">
                                    <span class="flag information"></span>
                                    <span class="moment-row-1">{{ list.title }}</span>
                                </div>
                                <!-- 中间的预览 -->
                                <div class="moment_browse">
                                    <p class="browse">{{ list.statisticsBackup.viewCount }}人浏览</p>
                                    <div class="comments">
                                        <div class="comments-list">
                                            <i class="iconfont icon-dianzan" style="font-size:15px;"></i>
                                            <span style="margin-right: 17px">&nbsp;{{ list.statisticsBackup.praiseCount
                                            }}</span>
                                            <i class="iconfont icon-pinglun" style="font-size:15px"></i>
                                            <span style="margin-right: 15px">&nbsp;{{ list.statisticsBackup.commentCount
                                            }}</span>
                                            <i class="iconfont icon-kongxinwujiaoxing" style="font-size:15px"></i>
                                            <span style="margin-right: 5px">&nbsp;{{ list.statisticsBackup.favoriteCount
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 最后的用户信息 -->
                            <div class="moment-user">
                                <div class="moment-user-span">
                                    <img :src="list.creatorBackup.avatar" alt="">
                                    <span>{{ list.creatorBackup.name }}</span>
                                </div>
                                <span class="moment-user-data">08-16</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页按钮 -->
                <div class="loading_btn">
                    <el-button @click="loadMore" :loading="isShow">加载更多</el-button>
                </div>
            </div>
        </div>
    </div>


    <!-- 回到顶部 -->
    <el-backtop :top="500" :bottom="350" :right="80" />

</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import RecommendAPI from "../../../../api/recommend"


// 推荐列表数据
const recommendList = ref([])
// 点击加载请求回来的数据
const loadPageList = ref([])
// 总页数
const total = ref(0)
// 加载
const isShow = ref(false)
// loading 
const loading = ref(false)
const isItem = ref(1)




// 单击发送请求1
const changePage1 = async () => {
    // 改变isitem 的值
   isItem.value = 1
   // 发送请求
   try {
     let result = await RecommendAPI.getPageList()
     recommendList.value = result.content
   } catch (error) {
     ElMessage.error('请求综合数据失败')
     console.error(error)
   }
}
// 单击发送请求1
const changePage2 = async () => {
    // 改变isitem 的值
   isItem.value = 2
   loading.value = true
   // 发送请求
   try {
     let result = await RecommendAPI.getCompPage()
     recommendList.value = result.content
   } catch (error) {
     ElMessage.error('请求综合数据失败')
     console.error(error)
   }

}
// 单击发送请求1
const changePage3 = async () => {
   // 改变isitem 的值
   isItem.value = 3
    // 发送请求
    try {
     let result = await RecommendAPI.getNewPage()
        recommendList.value = result.content
    } catch (error) {
        ElMessage.error('请求综合数据失败')
        console.error(error)
    }

}
// 单击发送请求1
const changePage4 = async () => {
    // 改变isitem 的值
   isItem.value = 4
     // 发送请求
     try {
        let result = await RecommendAPI.getLatePage()
            recommendList.value = result.content
    } catch (error) {
        ElMessage.error('请求综合数据失败')
        console.error(error)
    }

}


// 加载更多数据
const loadMore = async () => {
    // 点击显示加载
    isShow.value = true
    // 发送请求
    try {
        let result = await RecommendAPI.getLoadPage()
        loadPageList.value = result.content
    } catch (error) {
        ElMessage.error('获取更多数据失败')
        console.error(error)
    }
    // 组装数据
    setTimeout(() => {
        recommendList.value =  recommendList.value.concat(loadPageList.value)
        // 点击隐藏加载
        isShow.value = false
    },1000)
    
}


// 获取推荐列表
const getPageList = async () => {
        loading.value = true
            try {
                let result = await RecommendAPI.getDefault()
                recommendList.value = result.content
                total.value = result.totalPages
                loading.value = false
            } catch (error) {
                ElMessage.error('获取推荐列表数据失败')
                console.error(error)
                loading.value = false
            }
}
onMounted(() => {
    getPageList()
})


</script>

<style scoped lang="less">
.card {
    width: 100%;
    .card_list {
        width: 100%;
        background: #f1f1f1;

        .card_content {
            min-height: 700px;
            margin-right: 20px;
            padding-top: 20px;
            // 列表表头
            .filter_order {
                display: flex;
                align-content: center;
                .order_container {
                    background: none;
                    width: 1050px;
                    margin-bottom: 10px;
                    padding: 25px 30px;
                    font-size: 14px;
                    cursor: pointer;
                    .order_item {
                        margin-right: 60px;
                        width: 94px;
                        color: #666;
                        
                    }
                    .order_item:hover {
                            color:deeppink;
                    }
                    .active {
                        color:deeppink;
                    }
                }
                .order_btn {
                    height: 36px;
                    border-radius: 18px;
                    margin-top: 20px;
                    background: #e9ecec;
                    line-height: 36px;
                    color: #7d8090;
                    font-size: 16px;
                    cursor: pointer;
                    padding-left: 20px;
                    padding-right: 10px;
                }
            }
            // 推荐列表样式
            .loadMoreList {
                .content_card_item {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    .card_item {
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        width: 224px;
                        height: auto;
                        background-color: #fff;
                        border-radius: 4px;
                        margin-bottom: 20px;

                        .cover_waper {
                            height: 248px;
                            position: relative;
                            .cover {
                                .cover_img {
                                    opacity:1;
                                    width: 224px;
                                    height: 125px;
                                    border-radius: 4px 4px 0 0;
                                }
                                :hover {
                                    opacity:0.8;
                                }
                                .play_icon {
                                    position: absolute;
                                    bottom: 126px;
                                    left: 4px;
                                    display: inline-block;
                                    width: 30px;
                                    height: 30px;
                                }
                            }

                            .moment_detail {
                                padding: 10px;
                                height: 40px;
                                .flag {
                                    box-sizing: border-box;
                                    margin-right: 6px;
                                    display: inline-block;
                                    width: 24px;
                                    height: 16px;
                                    vertical-align: bottom;
                                    -webkit-transform: translateY(-1px);
                                    transform: translateY(-1px);
                                }
                                .information {
                                        background-size: cover;
                                        background-image: url('	https://rs.dance365.com/title_information1.svg');
                                    }
                                .moment-row-1 {
                                    font-size: 13px;
                                    margin-right: 5px;
                                }
                            }

                            .moment_browse {
                                margin: 10px 10px 0;

                                .browse {
                                    font-size: 13px;
                                    color: #99a9bf;
                                }

                                .comments {
                                    .comments-list {
                                        margin: 7px 0px;
                                        color: #99a9bf;
                                    }
                                }
                            }
                        }
                        .moment-user {
                            box-sizing: border-box;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            height: 50px;
                            padding-left: 16px;
                            position: relative;
                            overflow: hidden;
                            height: 50px;
                            font-size: 12px;
                            border-top: 1px #d3dce6 solid;
                        }


                        img {
                            width: 25px;
                            height: 25px;
                            border-radius: 50%;
                        }

                        .moment-user-span {
                            width: 80px;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            img {
                                vertical-align: middle;
                                margin-right: 5px;
                            }
                        }

                        .moment-user-data {
                            padding: 0 10px;
                            color: #99a9bf;
                        }
                    }
                }
            }

            // 分页按钮样式
            .loading_btn {
                text-align: center;
                padding-bottom: 50px;
                padding-top: 30px;
            }
        }

        .content-width {
            width: 1200px;
            margin-left: auto;
            margin-right: auto
        }
    }
}
</style>